<template>
	<Search />

	<div class="hu-wai">
		<!-- 活动预告 -->

		<div class="title">活动预告</div>
		<div class="preview-box">
			<div class="preview-item" v-for="(i, index) in previewList" :key="index">
				<div class="topic">
					<p class="topic-name">{{ i.name }}</p>
					<p class="topic-time">{{ i.time }}</p>
				</div>
				<div class="content">
					<p>{{ i.desc }}</p>
					<p class="addr">{{ i.addr }}</p>
				</div>
			</div>
		</div>
		<div class="footer">
			<el-button>上一页</el-button>
			<span>1/5</span>
			<el-button>下一页</el-button>
		</div>

		<!-- 活动照片 -->
		<div class="title">活动照片</div>
		<div class="box-list">
			<div class="box" v-for="(item, index) in list" :key="index">
				<el-image class="cover" :src="item.img" fit="cover" />
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="HuWai">
import Search from "./Search.vue";

const list = [
	{ name: "国际流行音乐教育", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/1.jpg" },
	{ name: "寻梦园采摘", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/2.jpg" },
	{ name: "老虎堡野趣公园·探险喀斯特", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/3.png" },
	{ name: "悬崖餐厅酒会2", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/4.jpg" },
	{ name: "亲子活动", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/5.png" },
	{ name: "农场主体验季 ", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/6.jpg" },
	{ name: "夏令营活动", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/7.jpg" },
	{ name: "野外CS", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/8.jpg" },
	{ name: "手工体验", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/9.jpg" },
	{ name: "草坪烧烤", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/10.jpg" },
	{ name: "篝火晚会", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/11.png" },
	{ name: "哈雷摩托车友会", img: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangqu/zhoumohui/guiyuanhuodong/12.jpg" }
];

// 活动预告
const previewList = [
	{ name: "春韵雅集", time: "(4-6月)", desc: "踏青赏花、户外曲艺雅集、时光市集、茶艺咖啡、亲子户外", addr: "地点：归原小镇" },
	{ name: "仲夏闲趣", time: "(7-8月)", desc: "火锅私宴、草坪啤酒音乐节、野奢露营、户外探险、蔬果采摘、宵夜江湖", addr: "地点：归原小镇" },
	{ name: "硕实秋意", time: "(9-10月)", desc: "主题团建", addr: "地点：归原小镇" },
	{ name: "雪境山趣", time: "(12-2月)", desc: "创猪家宴、仙山雪趣", addr: "地点：归原小镇" }
];
</script>
<style lang="scss" scoped>
.footer {
	width: 100%;
	text-align: right;
}
.hu-wai {
	padding: 0 320px;
	padding-bottom: 60px;
	.title {
		padding: 40px 0 20px;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
	}
	.preview-box {
		display: flex;
		flex-wrap: wrap;
		align-content: start;
		justify-content: space-between;
		min-height: 609px;
		.preview-item {
			box-sizing: border-box;
			display: flex;
			width: 620px;
			height: 120px;
			margin-bottom: 20px;
			border: 1px solid #8a1313;
			.topic {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 120px;
				height: 100%;
				color: #ffffff;
				background-color: #8a1313;
				p {
					padding: 0;
					margin: 0;
					&.topic-name {
						padding-bottom: 10px;
						font-size: 20px;
					}
					&.topic-time {
						font-size: 16px;
					}
				}
			}
			.content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20px;
				p {
					padding: 0;
					margin: 0;
					font-size: 16px;
					&:last-child {
						color: #c39f63;
					}
				}
			}
		}
	}
	.box-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.box {
			width: 413px;
			padding-bottom: 20px;
			margin-bottom: 40px;
			font-size: 16px;
			font-weight: bold;
			color: rgb(25 25 25 / 100%);
			border-bottom: 1px solid #dedede;
			.cover {
				width: 100%;
				height: 275px;
				margin-bottom: 20px;
			}
		}
	}
}

@media all and (max-width: 750px) {
	.hu-wai {
		padding: 16px;
		.title {
			padding-top: 16px;
		}
		.box-list {
			.box {
				width: 47.5%;
				margin-right: 5%;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
}
</style>
